import React, { memo, useRef } from "react";
import type { FC, ReactNode } from "react";
import { HomeListv2Wrapper } from "./style";
import AreaHeaderv1 from "@/components/area-headerv1";
import { CSSTransition } from 'react-transition-group';

interface IProps {
  children?: ReactNode;
  title: string
}

const HomeListV2: FC<IProps> = (rorps: IProps) => {
  const { title } = rorps
  const nodeRef = useRef(null)

  return <HomeListv2Wrapper>
    <AreaHeaderv1 title={title} />
    <div className="content-list">
      <div className="home-left home-item">
        <CSSTransition nodeRef={nodeRef} in={true} timeout={2000} classNames="rcmdBg">
          <img src="https://music.mzsq.top/images/pic/pic.jpg" ref={nodeRef} alt="" className="rcdbg" />
        </CSSTransition>
        <div className="showdown"></div>
        <div className="coninter">
          <div className="title-box">
            {
              ["每", "日", "推", "荐"].map(title => (
                <div className="title" key={title}>{title}</div>
              ))
            }
          </div>
          <div className="coninter-right">
            <span className="n-avatar_cover">
              <img loading="eager" src="https://music.mzsq.top/images/pic/pic.jpg" alt="" />
            </span>
            <div className="play-icon">
              <img src={require("@/assets/img/play.png")} alt="" />
            </div>
          </div>
        </div>
      </div>
      <div className="home-right home-item"></div>
    </div>
  </HomeListv2Wrapper>;
};

export default memo(HomeListV2);